<template>
	<view class="signup">
		<!-- 报名卡片 -->
		<template v-if="tableData.length">
			<view class="signupCard" v-for="(item,idx) of tableData" :key="idx">
				<view class="top">
					<!-- 毕业证样本 -->
					<view class="left">
						<u-image width="344rpx" height="200rpx" :src="item.edmsp"></u-image>
					</view>
					
					<view class="right">
						<!-- 考试名称 -->
						<view class="name">考试名称:{{item.ename}}</view>
						
						<!-- 考试时间 -->
						<view class="ccnm">考试时间:{{item.eemtm}}</view>
						
						<!-- 准考证号 -->
						<view class="ccnm">准考证号:{{item.zkh}}</view>
			
					</view>
				</view>
				
				<view class="bottom">
					<view class="left">
						<!-- 考试费 -->
						<view class="cost">考试费:{{item.ecost}}</view>
						
						<!-- 状态 -->
						<view class="cost">状态:
							<span style="color: red;">{{item.state}}</span>
						</view>
					</view>
					
					<view class="right">
						<!-- 插槽 -->
						<!-- <slot :row="examData"></slot> -->
						<u-button type="success" @click="goDetails(item)" size="mini">查看详情</u-button>
						<u-button v-if="item.state === '审核通过'" type="primary" @click="goPay(item)" size="mini">缴费</u-button>
					</view>
				</view>
			</view>
			
			<!-- <signup-card2 v-for="(item,idx) of tableData" :key="idx" :examData="item">
				<template v-slot="{ row }">
					<view class="btn">
						<u-button type="success" @click="goDetails(row)" size="mini">查看详情</u-button>
						<u-button v-if="row.state === '审核通过'" type="primary" @click="goPay(row)" size="mini">缴费</u-button>
					</view>
				</template>
			</signup-card2> -->
		</template>
		
		<template v-else>
			<no-data></no-data>
		</template>
		
		<u-loadmore :status="status" />
		<wyb-loading ref="loading"/>
		
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import tabBar from "@/components/tabBar.vue"
	import signupCard2 from "@/components/signupCard2.vue"
	import {
		list
	} from "@/api/apiList/user.js"
	import wybLoading from '@/components/wyb-loading/wyb-loading.vue'
	import noData from '@/components/noData.vue'
	
	export default {
		components:{
			tabBar,
			wybLoading,
			signupCard2,
			noData
		},
		data(){
			return{
				currentPage: 1, //当前页数
				total: 0, //总数
				size: 10, //每页条数
				tableData: [] ,//表格数据
				status: 'loadmore',
			}
		},
		methods:{
			async API_list(current, size) {
				let result = {
					page: {
						current, //第几页
						size //每页条数
					}
				}
				return await list(result)
			},
			goDetails(row) { //去报名表详情页
				this.$store.commit("signUpFormDetails/UPDATE_ROW",JSON.stringify(row))
				// uni.navigateTo({
				// 	url:"/pages/signupFormDetails/signupFormDetails?eid="+row.eid
				// })
				uni.navigateTo({
					url:"/pages/signupFormDetails/signupFormDetails?id="+row.id
				})
			},
			goPay(row) {//去支付页面
				// console.log(row)
				uni.navigateTo({
					url:"/pages/pay/pay?id="+row.id
				})
			},
			stateFilter(arr){//过滤状态
				return arr.map((item)=>{//状态：1-待审核、2-审核通过、3-审核不通过、4-已缴费、5-已出准考证、6-已出证书
					let obj = {}
					if(item.state === 1){
						item.state = "待审核"
						obj = item
					}else if(item.state === 2){
						item.state = "审核通过"
						obj = item
					}else if(item.state === 3){
						item.state = "审核不通过"
						obj = item
					}else if(item.state === 4){
						item.state = "已缴费"
						obj = item
					}else if(item.state === 5){
						item.state = "已出准考证"
						obj = item
					}else if(item.state === 6){
						item.state = "已出证书"
						obj = item
					}
					return obj
				})
			}
		},
		async onShow(){
			this.$refs.loading.showLoading()
			let res = await this.API_list(this.currentPage, this.size)
			
			let {
				current,
				records
			} = res.data.data
			this.currentPage = current
			this.total = records.length
			this.tableData = this.stateFilter(records)
			
			console.log(this.tableData)
			this.$refs.loading.hideLoading()
		},
		async onReachBottom(){//上拉加载
			if(this.tableData.length >= this.total){
				this.status = 'nomore';
				return
			}else{
				this.status = 'loading';
				this.current = ++this.current
				let res = await this.API_list(this.size,this.current)
				let {current,records} = res.data.data
				this.tableData.push(...records) 
			}
		}
	}
</script>

<style lang="scss" scoped>
	page,.signup{
		height: 100%;
	}
	.btn{
		width: 250rpx;
		display: flex;
		justify-content: space-around;
	}
	.signupCard{
		padding: 20rpx;
		box-sizing: border-box;
		.top{
			display: flex;
			.left{
				margin-right: 10rpx;
			}
			.right{
				display: flex;
				flex-direction: column;
				justify-content: space-around;
			}
		}
		.bottom{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				display: flex;
				flex-direction: column;
				justify-content: space-around;
			}
			
		}
	}
</style>
